<template>
  <div class="layout-wrapper">
    <!-- 左侧菜单栏 -->
    <el-aside
        width="260px"
        class="sidebar"
        v-if="$route.path !== '/login' && $route.path !== '/register'"
    >
      <div class="logo">MBTI 测试系统</div>
      <el-menu
          :default-active="$route.path"
          class="menu-vertical"
          @select="onMenuSelect"
          background-color="transparent"
          text-color="#fff"
          active-text-color="#ffd6e8"
          unique-opened
      >
        <el-menu-item index="/test">MBTI测试</el-menu-item>
        <el-menu-item index="/result">我的结果</el-menu-item>
        <el-menu-item index="/students">学生管理</el-menu-item>
        <el-menu-item index="/clazz">班级管理</el-menu-item>
        <el-menu-item index="/majors">专业管理</el-menu-item>
        <el-menu-item index="/colleges">学院管理</el-menu-item>
        <el-menu-item index="/logout">退出登录</el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 右侧内容区域 -->
    <el-main class="main-content" v-if="$route.path !== '/login' && $route.path !== '/register'">
      <router-view />
    </el-main>

    <!-- 登录/注册无菜单时直接内容全屏 -->
    <div v-else class="main-content-full">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    onMenuSelect(index) {
      if (index === '/logout') {
        sessionStorage.clear();
        this.$router.push('/login');
      } else {
        this.$router.push(index);
      }
    }
  }
};
</script>

<style scoped>
/* 整体布局，满屏高度，背景渐变蓝粉 */
.layout-wrapper {
  display: flex;
  height: 100vh;
  background: linear-gradient(135deg, #2196f3, #f8bbd0); /* 蓝到粉的柔和渐变 */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* 左侧菜单栏 */
.sidebar {
  background: rgba(33, 150, 243, 0.85); /* 半透明蓝 */
  box-shadow: 3px 0 15px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  padding-top: 30px;
  user-select: none;
}

/* LOGO区域 */
.logo {
  color: #fff;
  font-weight: 700;
  font-size: 24px;
  text-align: center;
  margin-bottom: 40px;
  letter-spacing: 2px;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

/* 菜单项背景透明，文字颜色白色 */
.menu-vertical {
  border-right: none !important;
}

/* 覆盖默认菜单文字颜色 */
.el-menu-vertical-demo:not(.is-collapse) > .el-menu-item {
  color: #ffffff;
  font-weight: 600;
  font-size: 16px;
  padding-left: 40px;
  transition: all 0.3s ease;
}

.el-menu-vertical-demo > .el-menu-item:hover {
  background-color: rgba(255, 214, 232, 0.3);
  color: #fce4ec;
}

/* 选中菜单项高亮粉色 */
.el-menu-item.is-active {
  background-color: #fce4ec !important;
  color: #2196f3 !important;
  font-weight: 700 !important;
  box-shadow: inset 4px 0 0 #f48fb1;
}

/* 右侧内容区 */
.main-content {
  flex: 1;
  margin: 40px;
  padding: 30px 40px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(244, 143, 177, 0.25);
  overflow-y: auto;
  min-height: calc(100vh - 80px);
  color: #333;
}

/* 登录/注册页面全屏内容，无菜单 */
.main-content-full {
  flex: 1;
  margin: 40px;
  padding: 30px 40px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(244, 143, 177, 0.25);
  overflow-y: auto;
  min-height: calc(100vh - 80px);
  color: #333;
}

/* 滚动条美化（可选） */
.main-content::-webkit-scrollbar {
  width: 8px;
}
.main-content::-webkit-scrollbar-track {
  background: transparent;
}
.main-content::-webkit-scrollbar-thumb {
  background-color: #f48fb1;
  border-radius: 10px;
}
</style>
